<template>
<div>
    <el-col :span="24" class="sector">
        <el-form :model="addedProduct" :rules="rules" ref="addedProduct" label-width="100px" class="demo-ruleForm">
            <el-col :span="10" :offset="7">
                <el-form-item label="保险名称：" prop="productName" class="formstyle">
                    <el-col :span="20">
                        <el-input v-model="addedProduct.productName" placeholder="3-20字符串，可包含中文/字母/数字等"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="保险价格：" prop="productPrice" class="formstyle">
                    <el-col :span="20">
                        <el-input v-model="addedProduct.productPrice"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="保险保额：" prop="compensation" class="formstyle">
                    <el-col :span="20">
                        <el-input v-model="addedProduct.compensation"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="保险分类：" prop="belongInsureSortId" required>
                    <el-select placeholder="请选择保险分类" v-model="addedProduct.belongInsureSortId">
                        <template v-for="item in sorts">
                            <el-option :label="item.sortName" :value="item['_id']" :key="item['_id']"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间：" required>
                    <el-col :span="11">
                        <el-form-item prop="uptime">
                            <el-date-picker type="date" placeholder="选择日期" v-model="addedProduct.uptime" style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="有效期限：" required>
                    <el-col :span=11>
                        <el-form-item prop="indate">
                            <el-input v-model="addedProduct.indate" placeholder="天"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="保险详情：" prop="productIntroduce" class="formstyle1">
                    <el-col :span=20>
                        <el-input type="textarea" v-model="addedProduct.productIntroduce"></el-input>
                    </el-col>
                </el-form-item>

                <el-upload class="avatar-uploader" action="http://localhost:3000/insureProduct/avatarAdd" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="this.addedProduct.imgSrc" :src="'http://localhost:3000/temp/' + this.addedProduct.imgSrc" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" style="background-color:gainsboro;"></i>
                </el-upload>

                <el-form-item>
                    <el-button type="primary" @click="addItem('addedProduct')">立即创建</el-button>
                    <el-button @click="resetForm('addedProduct')">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </el-col>
</div>
</template>

<script>
import {
    createNamespacedHelpers
} from 'vuex';
const {
    mapState,
    mapActions,
    mapMutations
} = createNamespacedHelpers("publicStore");
import api from '../../http/apis/apis';
export default {
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            addedProduct: {
                productName: '',
                productPrice: "",
                compensation: "",
                belongInsureSortId: '',
                uptime: '',
                indate: '',
                imgSrc: "",
                productIntroduce: ""
            },
            rules: {
                productName: [{
                        required: true,
                        message: '请输入保险名称',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 20,
                        message: '长度在 3 到 20 个字符',
                        trigger: 'blur'
                    }
                ],
                belongInsureSortId: [{
                    required: true,
                    message: '请选择保险分类',
                    trigger: "click"
                }],
                productPrice: [{
                    required: true,
                    message: '请选择保险价格',
                    trigger: 'blur'
                }],
                compensation: [{
                    required: true,
                    message: '请输入保额',
                    trigger: 'blur'
                }],
                uptime: [{
                    type: 'date',
                    required: true,
                    message: '请选择受保时间',
                    trigger: 'blur'
                }],
                indate: [{
                    required: true,
                    message: '请选择受保期限',
                    trigger: 'blur'
                }],
                productIntroduce: [{
                    required: true,
                    message: '请填写保险详情',
                    trigger: 'blur'
                }]
            },
            sorts: []
        }
    },
    created() {
        this.getSorts();
        this.setNowBreadcrumb("insureProduct");
    },
    methods: {
        ...mapMutations(["setNowBreadcrumb"]),
        // ...mapActions(['getSorts']),
        async getSorts() { //提交信息
            const {
                data
            } = await api.insureProductApi.getSorts();
            if (data.status) {
                this.sorts = data.data;
            };
        },
        async addItem(formName) { //提交信息
            const {
                data
            } = await api.insureProductApi.addItem(this.addedProduct);
            if (data.status) {
                this.$alert('产品已成功添加', '添加成功', {
                    confirmButtonText: '确定',
                });
                // this.addedProduct = {};
            } else {
                this.$alert('产品添加失败，请重新编辑', '添加失败', {
                    confirmButtonText: '确定',
                })
            };
        },
        resetForm(formName) { //重置表单
            this.$refs[formName].resetFields();
        },

        //图片上传的方法
        handleAvatarSuccess(res, file) {
            this.addedProduct.imgSrc = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
        }
    },
}
</script>

<style lang="scss" scoped>
.formstyle1 {
    width: 600px;
}

.sector {
    padding-top: 30px;
}

.avatar-uploader {
    text-align: center;
    margin-bottom: 22px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

@import '../../assets/scss/public/sector.scss';
</style>
